<template>
<div class="container">
  <div style="text-align: center;padding: 10px 0">
    <UserAvatar/>
  </div>
  <div class="left">
    <UserDetails/>
  </div>
  <div class="right">
    <ResetPwd/>
  </div>
</div>
</template>

<script>
import UserAvatar from "@/components/UserAvatar";
import UserDetails from "@/components/UserDetails";
import ResetPwd from "@/components/ResetPwd";

export default {
  name: "UserInfo",
  components: { UserAvatar,UserDetails,ResetPwd }
}
</script>

<style scoped>
.container {
  width: 80%;
  height: calc(100vh - 100px);
  margin: 0 auto;
  background-color: #fcf3ec;
}
.left {
  width: 40%;
  float: left;
  margin-left: 20px;
  padding: 10px;
}
.right {
  width: 40%;
  float: right;
  margin-right: 20px;
  padding: 10px;
}

</style>
